<template>
  <el-card>
    <div class="admin">
      <Header :pageOpts="pageOpts"
              @page-change="pageChange" />
      <Table :rows="rows"
             :pageOpts="pageOpts"
             @page-change="pageChange" />

      <Page :pageOpts="pageOpts"
            @page-change="pageChange" />

    </div>
  </el-card>
</template>
<script>
import { getNewsList, addNews, updateNews } from "@/api/news";
import { getArticleList } from "@/api/article";
import { NEWS_TYPE } from "@/static/type";
import Table from "./table";
import Page from "./page";
import Header from "./header";
export default {
  components: {
    Table,
    Page,
    Header
  },
  data() {
    return {
      rows: [],
      pageOpts: {
        curPage: 1,
        limit: 10,
        total: 0,
        offset: 0,
        languageType: 1,
        search: {
          sort: "createTime",
          order: "desc",
          status: "0"
        }
      }
    };
  },
  async created() {
    await this.getArticleList();
  },
  methods: {
    async getArticleList() {
      const {
        rows,
        curPage,
        total,
        limit,
        sort,
        sortOrder,
        offset,
        search
      } = await getArticleList(this.pageOpts);

      this.rows = rows;
      this.pageOpts = {
        curPage,
        total,
        limit,
        offset,
        languageType: search.languageType,
        search: {
          status: search.staus,
          sortOrder: search.sortOrder,
          sort: search.sort
        }
      };
    },

    pageChange(pageOpts) {
      this.pageOpts = pageOpts;
      this.getArticleList();
    }
  }
};
</script>
<style lang="scss" scoped>
.admin {
  padding: 15px;
  .header {
    margin-bottom: 15px;
  }
}
</style>


